<template>
  <div class="search">
    <v-touch @swipeleft ="left" @swiperight="left">
    <div class="top2">
      <input type="text" :placeholder="txt" @focus="txt=''" @blur="txt='搜索职位/公司/内容'" @keydown.enter="enter" v-model="val" @keyup="down">
      <p>取消</p>
    </div>
    <div class="main" v-show="!flg">
      <div class="h5">
        <h5>搜索发现</h5>
        <div>
          <img :src="URL+'ref.svg'" alt="">
          <p>换一批</p>
        </div>
      </div>
      <div class="list3">
        <ul>
          <li>
            资料审核文员
            <span>热</span>
          </li>
          <li>
            快递分练
            <span>热</span>
          </li>
          <li>学生暑假工前台</li>
          <li>短期工作</li>
          <li>必胜客兼职</li>
          <li>小时工兼职发传单</li>
          <li>普工操作工</li>
          <li>蛋糕包装工</li>
          <li>搬运工</li>
          <li>缝纫工</li>
          <li>影城检票员</li>
          <li>招生助理</li>
        </ul>
      </div>
    </div>
    <List :data="data" v-show="flg"></List>
    </v-touch>
  </div>
</template>

<script>
import List from "@/components/JobList.vue"
export default {
  // props:['flg'],
  components:{
    List
  },
  data(){
    return {
      txt:'搜索职位/公司/内容',
      val:'',
      flg:false,
      data:[],
    }
  },
  methods: {
    left(){
      // this.$emit("xiugai")
      this.$store.commit('judge')
      this.$router.back()
    },
    enter(){
      let str = this.val
      let list = this.$store.getters.data.position
      this.data = list.filter((item)=>{
        if(str){
          return  item.title.indexOf(str) != -1 
        }else{
          return null
        }
      })
      // console.log(list[0].title.indexOf("端"));
      // console.log(this.data);
      this.flg = !this.flg
    },
    down(){
      // console.log(this.val);
      if(this.val===''){
        this.flg = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .search{
    width: 100vw;
    background-color: white;
    // padding: 20px;
    .top2{
      width: 100%;
      padding: 20px;
      display: flex;
      background-color: white;
      justify-content: space-between;
      align-items: center;
      input{
        width: 270px;
        height: 30px;
        // background-color: rgba(245, 245, 245, 0.5);
        background:url(#{$URL}search1.svg) no-repeat 12px 5px/7% rgba(245, 245, 245, 0.5);
        border: none;
        padding-left: 40px;
        border-radius: 20px;
        outline: none;
        // padding-top: 10px;
        // margin-top: 20px;
        // margin-left: 10px;
      }
      input::-webkit-input-placeholder{
        // padding-left: 30px;
        color: rgb(209, 207, 207);
      }
      p{
        color: rgb(209, 207, 207);
      }
    }
    .main{
      background-color: white;
      border: none;
      // margin-top: 50px;
      padding: 20px;
      .h5{
        display: flex;
        justify-content: space-between;
        div {
          display: flex;
          img{
          width: 15px;
          height: 15px;
          // margin-left: 210px;
        }
        p{
          font-size: 12px;
          margin-left: 5px;
        }
        }
      }
      .list3{
        ul{
          margin-top: 15px;
          // margin-left: 10px;
          display: flex;
          flex-wrap: wrap;
          li{
            margin: 10px 10px 10px 0;
            height: 30px;
            width: 120px;
            font-size: 12px;
            text-align: center;
            line-height: 30px;
            background-color: rgba(245, 245, 245, 0.5);
            span{
              width: 22px;
              height: 22px;
              padding: 1%;
              background-color: orange;
              border-radius:2px ;
              color: white;
            }
          }
          li:nth-child(2){
            width: 100px;
          }
          li:nth-child(4){
            width: 90px;
          }
          li:nth-child(5){
            width: 100px;
          }
          li:nth-child(7){
            width: 100px;
          }
          li:nth-child(8){
            width: 100px;
          }
          li:nth-child(9){
            width: 70px;
          }
          li:nth-child(10){
            width: 70px;
          }
          li:nth-child(11){
            width: 100px;
          }
          li:nth-child(12){
            width: 90px;
          }
        }
      }
    }
  }
</style>